import { Layout } from "antd"
import { useState } from "react"
import DatabaseList from "./DatabaseList";
import CollectionList from "./CollectionList";
import DocList from "./DocList";


function App() {

  const [curClientId, setCurClientId] = useState("");
  const [curDatabase, setCurDatabase] = useState("");
  const [curCollection, setCurCollection] = useState("");

  return (
    <Layout hasSider style={{ height: "100vh" }}>
      <Layout.Sider width={"200px"} theme="light">
        <DatabaseList onChange={(clientId, database) => {
          setCurClientId(clientId);
          setCurDatabase(database);
        }} />
      </Layout.Sider>
      <Layout.Sider width={"260px"} theme="light" style={{ borderLeft: "1px solid #e4e4e8", borderRight: "1px solid #e4e4e8" }}>
        <CollectionList curClientId={curClientId} curDatabase={curDatabase} onChange={coll => setCurCollection(coll)} />
      </Layout.Sider>
      <Layout.Content>
        <DocList curClientId={curClientId} curDatabase={curDatabase} curCollection={curCollection}/>
      </Layout.Content>
    </Layout>
  )
}

export default App
